<script setup>
import {onBeforeMount, onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {saveApi} from "../../../api/stages.js";
import {RULE} from "../../../const";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {listApi} from "../../../api/direction.js";
import {getResponseData} from "../../../util/index.js";

/* ==================== 查询全部的课程方向记录 ==================== */
// 课程方向下拉菜单选项
let directionItems = ref([]);

async function listDirection() {
  let res = await listApi();
  Object.values(getResponseData(res)).forEach(direction => {
    directionItems.value.push({'label': direction['name'], 'value': direction['id']});
  });
}

/* ==================== 添加表单 ==================== */

// 表单项
let items = shallowRef([
  {'label': '阶段名称', 'prop': 'name', 'required': true, 'span': 12},
  {
    'label': '课程方向', 'prop': 'directionId', 'type': 'select', 'optionItems': directionItems.value,
    'required': true, 'span': 12
  },
  {'label': '阶段序号', 'prop': 'sort', 'type': 'number', 'required': true, 'span': 12},
  {'label': '阶段学时', 'prop': 'hours', 'type': 'number', 'required': true, 'span': 12},
  {'label': '涵盖技术', 'prop': 'technicalPoints', 'type': 'textarea'},
  {'label': '阶段描述', 'prop': 'info', 'type': 'textarea'}
]);
// 表单值
let data = shallowReactive({});
// 表单规则
let rules = {
  'info': RULE.COMMON_INFO,
};

/* ==================== 加载函数 ==================== */
onBeforeMount(() => listDirection());

</script>

<template>

  <my-nav :items="[
    {'icon': 'Avatar', 'label': '课程管理'},
    {'icon': 'User', 'label': '课程阶段列表', 'url': '/CourseStages'},
    {'icon': 'Plus', 'label': '添加课程阶段'},
  ]"/>

  <el-divider/>

  <el-card class="stages-insert-card" header="添加课程阶段信息">
    <my-form type="insert"
             v-if="directionItems.length > 0"
             :items="items"
             :data="data"
             :rules="rules"
             :api="saveApi"
             :fn="() => router.push('/CourseStages')"/>
  </el-card>
</template>

<style scoped lang="scss">
.stages-insert-card {
  width: 60%;
  margin: auto;
}
</style>